<template>
  <div class="login-page">
    <!-- 登录卡片（保持工号登录） -->
    <el-card class="box-card" v-if="currentView === 'login'">
      <div slot="header" class="clearfix">
        <div class="login-title">
          <i class="el-icon-leaf"></i>
          <span>茶叶加工管理系统</span>
        </div>
      </div>
      <div class="login-form">
        <el-form :model="form" :rules="loginRules" ref="loginForm">
          <el-form-item prop="workId">
            <el-input
                type="text"
                v-model="form.workId"
                auto-complete="off"
                placeholder="请输入工号"
                size="medium">
              <template slot="prepend">
                <i class="el-icon-user-solid" style="color: #67C23A;"></i>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="passWord">
            <el-input
                type="password"
                v-model="form.passWord"
                auto-complete="off"
                placeholder="请输入密码"
                size="medium"
                show-password>
              <template slot="prepend">
                <i class="el-icon-lock" style="color: #67C23A;"></i>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button
                style="width:100%;"
                type="success"
                @click="handleLogin"
                :loading="loading"
                size="medium">
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="link-group">
        <span @click="switchTo('register')" class="link">注册账号</span>
        <span @click="switchTo('forgot')" class="link">忘记密码</span>
      </div>
      <div class="footer">
        <div class="tea-leaf-decoration">
          <i class="el-icon-leaf"></i>
          <i class="el-icon-leaf"></i>
          <i class="el-icon-leaf"></i>
        </div>
        <p class="copyright">© 2025 茶叶加工管理系统</p>
      </div>
    </el-card>

    <!-- 注册卡片（保持不变） -->
    <el-card class="box-card" v-if="currentView === 'register'">
      <div slot="header" class="clearfix">
        <div class="login-title">
          <i class="el-icon-leaf"></i>
          <span>账号注册</span>
        </div>
      </div>
      <div class="login-form">
        <el-form :model="registerForm" :rules="registerRules" ref="registerForm" label-width="0px">
          <el-form-item prop="userName">
            <el-input
                type="text"
                v-model="registerForm.userName"
                auto-complete="off"
                placeholder="请设置用户名"
                size="medium">
              <template slot="prepend">
                <i class="el-icon-user-solid" style="color: #67C23A;"></i>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="phone">
            <el-input
                type="text"
                v-model="registerForm.phone"
                auto-complete="off"
                placeholder="请输入手机号"
                size="medium"
                maxlength="11">
              <template slot="prepend">
                <i class="el-icon-phone" style="color: #67C23A;"></i>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="email">
            <el-input
                type="text"
                v-model="registerForm.email"
                auto-complete="off"
                placeholder="请输入邮箱"
                size="medium">
              <template slot="prepend">
                <i class="el-icon-message" style="color: #67C23A;"></i>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="verifyCode">
            <el-input
                type="text"
                v-model="registerForm.verifyCode"
                auto-complete="off"
                placeholder="请输入验证码"
                size="medium">
              <template slot="prepend">
                <i class="el-icon-shield" style="color: #67C23A;"></i>
              </template>
              <template slot="append">
                <el-button
                    type="text"
                    size="small"
                    :disabled="registerCodeDisabled"
                    @click="sendRegisterCode"
                    style="color: #4caf50; padding: 0 15px;">
                  {{ registerCodeText }}
                </el-button>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="passWord">
            <el-input
                type="password"
                v-model="registerForm.passWord"
                auto-complete="off"
                placeholder="请设置密码"
                size="medium"
                show-password>
              <template slot="prepend">
                <i class="el-icon-lock" style="color: #67C23A;"></i>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="confirmPass">
            <el-input
                type="password"
                v-model="registerForm.confirmPass"
                auto-complete="off"
                placeholder="请确认密码"
                size="medium"
                show-password>
              <template slot="prepend">
                <i class="el-icon-check" style="color: #67C23A;"></i>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button
                style="width:100%;"
                type="success"
                @click="handleRegister"
                :loading="loading"
                size="medium">
              注册
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="link-group">
        <span @click="switchTo('login')" class="link">返回登录</span>
      </div>
      <div class="footer">
        <div class="tea-leaf-decoration">
          <i class="el-icon-leaf"></i>
          <i class="el-icon-leaf"></i>
          <i class="el-icon-leaf"></i>
        </div>
        <p class="copyright">© 2025 茶叶加工管理系统</p>
      </div>
    </el-card>

    <!-- 忘记密码卡片（用户名改为工号） -->
    <el-card class="box-card" v-if="currentView === 'forgot'">
      <div slot="header" class="clearfix">
        <div class="login-title">
          <i class="el-icon-leaf"></i>
          <span>忘记密码</span>
        </div>
      </div>
      <div class="login-form">
        <el-form :model="forgotForm" :rules="forgotRules" ref="forgotForm" label-width="0px">
          <!-- 用户名改为工号 -->
          <el-form-item prop="workId">
            <el-input
                type="text"
                v-model="forgotForm.workId"
                auto-complete="off"
                placeholder="请输入您的工号"
                size="medium">
              <template slot="prepend">
                <i class="el-icon-user-solid" style="color: #67C23A;"></i>
              </template>
            </el-input>
          </el-form-item>

          <!-- 邮箱（保持不变） -->
          <el-form-item prop="email">
            <el-input
                type="text"
                v-model="forgotForm.email"
                auto-complete="off"
                placeholder="请输入注册时的邮箱"
                size="medium">
              <template slot="prepend">
                <i class="el-icon-message" style="color: #67C23A;"></i>
              </template>
            </el-input>
          </el-form-item>

          <!-- 验证码（保持不变） -->
          <el-form-item prop="verifyCode">
            <el-input
                type="text"
                v-model="forgotForm.verifyCode"
                auto-complete="off"
                placeholder="请输入验证码"
                size="medium">
              <template slot="prepend">
                <i class="el-icon-shield" style="color: #67C23A;"></i>
              </template>
              <template slot="append">
                <el-button
                    type="text"
                    size="small"
                    :disabled="forgotCodeDisabled"
                    @click="sendForgotCode"
                    style="color: #4caf50; padding: 0 15px;">
                  {{ forgotCodeText }}
                </el-button>
              </template>
            </el-input>
          </el-form-item>

          <!-- 新密码（保持不变） -->
          <el-form-item prop="newPass">
            <el-input
                type="password"
                v-model="forgotForm.newPass"
                auto-complete="off"
                placeholder="请设置新密码"
                size="medium"
                show-password>
              <template slot="prepend">
                <i class="el-icon-lock" style="color: #67C23A;"></i>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-button
                style="width:100%;"
                type="success"
                @click="handleResetPassword"
                :loading="loading"
                size="medium">
              重置密码
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="link-group">
        <span @click="switchTo('login')" class="link">返回登录</span>
      </div>
      <div class="footer">
        <div class="tea-leaf-decoration">
          <i class="el-icon-leaf"></i>
          <i class="el-icon-leaf"></i>
          <i class="el-icon-leaf"></i>
        </div>
        <p class="copyright">© 2025 茶叶加工管理系统</p>
      </div>
    </el-card>
  </div>
</template>

<script>
// 从工具文件导入校验规则和函数
import {
  loginRules,        // 登录规则（直接导入）
  forgotRules,       // 忘记密码规则（直接导入）
  getRegisterRules,// 注册规则（需传 registerForm，返回规则对象）
  //ValidationRegExp
} from '@/utils/validateRules'; // 路径根据项目实际结构调整（@ 通常指向 src 目录）

export default {
  data() {
    // 1. 移除原有的验证函数（validatePass、validatePhone 等）
    // 2. 保留表单数据和其他状态
    return {
      currentView: 'login',
      loading: false,

      // 登录表单
      form: {
        workId: '',
        passWord: ''
      },

      // 注册表单
      registerForm: {
        userName: '',
        phone: '',
        email: '',
        verifyCode: '',
        passWord: '',
        confirmPass: ''
      },
      registerCodeText: '发送验证码',
      registerCodeDisabled: false,
      registerCountdown: 0,

      // 忘记密码表单
      forgotForm: {
        workId: '',
        email: '',
        verifyCode: '',
        newPass: ''
      },
      forgotCodeText: '发送验证码',
      forgotCodeDisabled: false,
      forgotCountdown: 0,

      // 3. 导入工具文件的规则（无需再手动定义）
      loginRules: loginRules,                // 直接赋值登录规则
      forgotRules: forgotRules,              // 直接赋值忘记密码规则
      registerRules: {}                      // 注册规则需动态生成，先初始化空对象
    }
  },
  // 4. 组件初始化时，生成注册规则（传入 registerForm 用于密码一致性校验）
  created() {
    this.registerRules = getRegisterRules(this.registerForm);
  },
  methods: {
        switchTo(view) {
      this.currentView = view;
      // 重置表单
      this.$refs.loginForm && this.$refs.loginForm.resetFields();
      this.$refs.registerForm && this.$refs.registerForm.resetFields();
      this.$refs.forgotForm && this.$refs.forgotForm.resetFields();
    },

    // 处理登录
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          // 模拟登录请求
          setTimeout(() => {
            this.loading = false;
            // 登录成功后跳转到/tea路径
            this.$router.push('/home');
            this.$message.success('登录成功！');
          }, 1000);
        }
      });
    },

    // 处理注册
    handleRegister() {
      this.$refs.registerForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          // 模拟注册请求
          setTimeout(() => {
            this.loading = false;
            this.$message.success('注册成功，请登录！');
            this.switchTo('login');
          }, 1000);
        }
      });
    },

    // 处理密码重置
    handleResetPassword() {
      this.$refs.forgotForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          // 模拟密码重置请求
          setTimeout(() => {
            this.loading = false;
            this.$message.success('密码重置成功，请登录！');
            this.switchTo('login');
          }, 1000);
        }
      });
    }
  },
  beforeDestroy() {
    this.clearRegisterCountdown();
    this.clearForgotCountdown();
  }
}
</script>

<style scoped>
/* 样式保持不变 */
.login-page {
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.login-page::before {
  content: "";
  position: absolute;
  width: 300%;
  height: 300%;
  top: -100%;
  left: -100%;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><path d="M20,50 Q40,30 50,50 T80,50" fill="none" stroke="%23a5d6a7" stroke-width="0.5" opacity="0.3"/></svg>');
  animation: rotate 30s linear infinite;
  z-index: 0;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

.box-card {
  width: 380px;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(76, 175, 80, 0.15);
  border: none;
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.92);
}

.login-title {
  text-align: center;
  font-size: 22px;
  color: #2e7d32;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
}

.login-title i {
  font-size: 28px;
  margin-right: 10px;
  color: #4caf50;
}

.login-title span {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.login-form {
  padding: 20px 30px 10px;
}

.link-group {
  display: flex;
  justify-content: space-between;
  padding: 0 30px 15px;
  font-size: 14px;
}

.link {
  color: #4caf50;
  cursor: pointer;
  transition: color 0.3s;
}

.link:hover {
  color: #388e3c;
  text-decoration: underline;
}

.footer {
  text-align: center;
  padding: 15px 0 20px;
  color: #81c784;
  font-size: 13px;
}

.tea-leaf-decoration {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}

.tea-leaf-decoration i {
  margin: 0 8px;
  font-size: 18px;
  color: #a5d6a7;
  animation: float 3s ease-in-out infinite;
}

.tea-leaf-decoration i:nth-child(2) {
  animation-delay: 0.5s;
}

.tea-leaf-decoration i:nth-child(3) {
  animation-delay: 1s;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

.copyright {
  margin-top: 5px;
  letter-spacing: 0.5px;
}

.el-card__header {
  border-bottom: 1px solid #e8f5e9 !important;
  padding: 15px 20px !important;
}

.el-input__inner {
  border-radius: 8px !important;
  border: 1px solid #c8e6c9 !important;
  transition: all 0.3s;
}

.el-input__inner:focus {
  border-color: #4caf50 !important;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2) !important;
}

.el-button--success {
  background: #4caf50 !important;
  border-color: #4caf50 !important;
  border-radius: 8px !important;
  font-weight: 500;
  letter-spacing: 1px;
  transition: all 0.3s;
}

.el-button--success:hover {
  background: #388e3c !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
}

.el-input-group__prepend,
.el-input-group__append {
  background: #e8f5e9 !important;
  border: 1px solid #c8e6c9 !important;
}

.el-input-group__prepend {
  border-right: none !important;
  border-radius: 8px 0 0 8px !important;
}

.el-input-group__append {
  border-left: none !important;
  border-radius: 0 8px 8px 0 !important;
}

.el-button--text:hover {
  color: #388e3c !important;
  background: transparent !important;
}
</style>